<template>
  <div class="blog-detail">
    <div class="container">
      <!-- 返回按钮 -->
      <div class="blog-detail__back">
        <ElButton @click="$router.back()">
          <ElIcon><ArrowLeft /></ElIcon>
          返回列表
        </ElButton>
      </div>
      
      <!-- 文章未找到 -->
      <ElResult
        v-if="!article"
        icon="warning"
        title="文章未找到"
        sub-title="抱歉，您访问的文章不存在或已被删除"
      >
        <template #extra>
          <ElButton type="primary" @click="$router.push('/blog')">
            返回博客列表
          </ElButton>
        </template>
      </ElResult>
      
      <!-- 文章内容 -->
      <article v-else class="article">
        <!-- 文章头部 -->
        <header class="article__header">
          <ElTag
            v-if="article.category"
            :type="getCategoryType(article.category)"
            size="large"
            effect="dark"
          >
            {{ article.category }}
          </ElTag>
          
          <h1 class="article__title">{{ article.title }}</h1>
          
          <div class="article__meta">
            <div class="meta-item">
              <ElIcon><Calendar /></ElIcon>
              <span>{{ formatDate(article.date) }}</span>
            </div>
            
            <div class="meta-item">
              <ElIcon><View /></ElIcon>
              <span>{{ article.views || 0 }} 阅读</span>
            </div>
            
            <div class="meta-item">
              <ElIcon><ChatDotRound /></ElIcon>
              <span>{{ article.comments || 0 }} 评论</span>
            </div>
          </div>
          
          <div class="article__tags">
            <ElTag
              v-for="tag in article.tags"
              :key="tag"
              effect="plain"
            >
              {{ tag }}
            </ElTag>
          </div>
        </header>
        
        <!-- 文章封面 -->
        <div v-if="article.cover" class="article__cover">
          <ElImage
            :src="article.cover"
            :alt="article.title"
            fit="cover"
          >
            <template #error>
              <div class="image-slot">
                <ElIcon><Picture /></ElIcon>
              </div>
            </template>
          </ElImage>
        </div>
        
        <!-- 文章正文 -->
        <div class="article__content">
          <p>{{ article.summary }}</p>
          <ElDivider />
          <p style="color: var(--text-secondary); text-align: center;">
            这里是文章内容区域，实际项目中可以使用 Markdown 渲染器来显示富文本内容。
          </p>
        </div>
        
        <!-- 文章底部 -->
        <footer class="article__footer">
          <ElDivider>分享文章</ElDivider>
          <div class="share-buttons">
            <ElButton type="primary" circle>
              <ElIcon><Share /></ElIcon>
            </ElButton>
            <ElButton type="success" circle>
              <ElIcon><ChatDotRound /></ElIcon>
            </ElButton>
            <ElButton type="info" circle>
              <ElIcon><Star /></ElIcon>
            </ElButton>
          </div>
        </footer>
      </article>
      
      <!-- 相关文章 -->
      <section v-if="article && relatedArticles.length > 0" class="related-articles section">
        <h2 class="section-title">相关文章</h2>
        <div class="related-grid">
          <BlogCard
            v-for="relatedArticle in relatedArticles"
            :key="relatedArticle.id"
            :article="relatedArticle"
          />
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, Calendar, View, ChatDotRound, Picture, Share, Star } from '@element-plus/icons-vue'
import BlogCard from '@/components/common/BlogCard.vue'
import { blogArticles } from '@/data/blog.js'
import dayjs from 'dayjs'

const route = useRoute()
const router = useRouter()

// 获取当前文章
const article = computed(() => {
  const id = parseInt(route.params.id)
  return blogArticles.find(a => a.id === id)
})

// 获取相关文章（同分类的其他文章）
const relatedArticles = computed(() => {
  if (!article.value) return []
  
  return blogArticles
    .filter(a => a.id !== article.value.id && a.category === article.value.category)
    .slice(0, 3)
})

// 格式化日期
const formatDate = (date) => {
  return dayjs(date).format('YYYY年MM月DD日')
}

// 获取分类类型
const getCategoryType = (category) => {
  const typeMap = {
    '技术': 'primary',
    '生活': 'success',
    '随笔': 'info',
    '教程': 'warning'
  }
  return typeMap[category] || 'info'
}
</script>

<style lang="scss" scoped>
.blog-detail {
  padding: $spacing-2xl 0;
  
  &__back {
    margin-bottom: $spacing-xl;
  }
}

.article {
  background: var(--bg-primary);
  border-radius: $radius-lg;
  padding: $spacing-3xl;
  box-shadow: var(--shadow-md);
  margin-bottom: $spacing-3xl;
  
  @include respond-to('sm') {
    padding: $spacing-2xl;
  }
  
  &__header {
    text-align: center;
    margin-bottom: $spacing-2xl;
  }
  
  &__title {
    font-size: $font-size-4xl;
    font-weight: $font-weight-bold;
    color: var(--text-primary);
    margin: $spacing-lg 0;
    line-height: 1.3;
    
    @include respond-to('sm') {
      font-size: $font-size-2xl;
    }
  }
  
  &__meta {
    display: flex;
    justify-content: center;
    gap: $spacing-xl;
    margin-bottom: $spacing-lg;
    flex-wrap: wrap;
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: $spacing-xs;
      font-size: $font-size-base;
      color: var(--text-secondary);
      
      .el-icon {
        font-size: 16px;
      }
    }
  }
  
  &__tags {
    display: flex;
    justify-content: center;
    gap: $spacing-sm;
    flex-wrap: wrap;
  }
  
  &__cover {
    margin-bottom: $spacing-2xl;
    border-radius: $radius-md;
    overflow: hidden;
    
    .el-image {
      width: 100%;
      height: 400px;
      
      @include respond-to('sm') {
        height: 250px;
      }
    }
    
    .image-slot {
      @include flex-center;
      width: 100%;
      height: 100%;
      background: var(--bg-secondary);
      color: var(--text-secondary);
      font-size: 64px;
    }
  }
  
  &__content {
    font-size: $font-size-lg;
    line-height: 1.8;
    color: var(--text-primary);
    
    p {
      margin-bottom: $spacing-lg;
    }
  }
  
  &__footer {
    margin-top: $spacing-3xl;
    text-align: center;
  }
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: $spacing-md;
}

.related-articles {
  .related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: $spacing-xl;
    
    @include respond-to('md') {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}
</style>
